<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>下拉列表</title>
	<style type="text/css">
	    #list{ height: 50px;}
	    #list li{float: left; list-style: none;  text-align: center;width: 100px; border:1px;}
	    #list li a{ text-decoration: none;}
	    #list .oli ul{ margin: 0px; padding: 0px; display:none;}
	</style>
</head>
<body>
	<ul id="list">
		<li class="oli"><a href="#">首页</a>
			<ul>
				<li>vivo</li>
		    	<li>华为</li>
		    </ul>
		</li>
		<li class="oli"><a href="#">首页</a>
			<ul>
				<li>vivo</li>
		    	<li>华为</li>
		    </ul>
		</li>
		<li class="oli"><a href="#">首页</a>
			<ul>
				<li>vivo</li>
		    	<li>华为</li>
		    </ul>
		</li>
		<li class="oli"><a href="#">首页</a>
			<ul>
				<li>vivo</li>
		    	<li>华为</li>
		    </ul>
		</li>
		<li class="oli"><a href="#">首页</a>
			<ul>
				<li>vivo</li>
		    	<li>华为</li>
		    </ul>
		</li>
		<li class="oli"><a href="#">首页</a>
			<ul>
				<li>vivo</li>
		    	<li>华为</li>
		    </ul>
		</li>
	</ul>

	<script type="text/javascript">
	    window.onload=function(){

	    	var Oul=document.getElementById('list');
	    	var oli=Oul.children;
	    	for(var i=0;i<oli.length;i++){
	    	oli[i].onmouseover=function(){
	    	   var childul=this.getElementsByTagName('ul')[0];
	    		childul.style.display="block";
	    	}
	    	oli[i].onmouseout=function(){
	    		var childul=this.getElementsByTagName('ul')[0];
	    		childul.style.display="none";
	    	}
	    	}
	    }
	</script>

</body>
</html>